<template>
  <div id="contain">
    <div class="top">
      <span><i class="el-icon-user"></i> 商家</span>
      <span style="float: right; color: #f56c6c" @click="logout"
        ><i class="el-icon-switch-button"></i> 退出登录</span
      >
    </div>
    <el-row style="margintop: 10px">
      <el-col :span="5">
        <div class="left1">
          <el-menu
            background-color="#545c64"
            default-active="2"
            class="el-menu-vertical-demo"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
          >
            <el-menu-item index="1">
              <i class="el-icon-s-custom"></i>
              <span slot="title">个人信息</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">发布信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">发布景点</el-menu-item>
                <el-menu-item index="2-2">发布酒店</el-menu-item>
                <el-menu-item index="2-3">发布线路</el-menu-item>
                <el-menu-item index="2-4">发布广告</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span slot="title">我的发布</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">景点</el-menu-item>
                <el-menu-item index="3-2">酒店</el-menu-item>
                <el-menu-item index="3-3">线路</el-menu-item>
                <el-menu-item index="3-4">广告</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-collection-tag"></i>
                <span slot="title">订单中心</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">酒店订单</el-menu-item>
                <el-menu-item index="4-2">跟团游订单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-menu-item index="5">
              <i class="el-icon-notebook-1"></i>
              <span slot="title">顾客信息</span>
            </el-menu-item> -->
          </el-menu>
        </div>
      </el-col>
      <el-col :span="19">
        <SelfInfo v-if="activeIndex==='1'"/>
        <PushJd v-if="activeIndex==='2-1'"/>
        <PushHotel v-if="activeIndex==='2-2'"/>
        <PushXianlu v-if="activeIndex==='2-3'"/>
        <PushGgao v-if="activeIndex==='2-4'"/>
        <MyJd v-if="activeIndex==='3-1'"/>
        <MyHotel v-if="activeIndex==='3-2'"/>
        <MyXianlu v-if="activeIndex==='3-3'"/>
        <MyGgao v-if="activeIndex==='3-4'"/>
        <OrderHotel v-if="activeIndex==='4-1'"/>
        <OrderXianlu v-if="activeIndex==='4-2'"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SelfInfo from '@/views/userInfo/selfinfo.vue';
import PushGgao from "@/views/Business/PushGgao.vue";
import PushJd from "@/views/Business/PushJd.vue";
import PushHotel from "@/views/Business/PushHotel.vue";
import PushXianlu from "@/views/Business/PushXianlu.vue";

import MyGgao from "@/views/Business/MyGgao.vue";
import MyJd from "@/views/Business/MyJd.vue";
import MyHotel from "@/views/Business/MyHotel.vue";
import MyXianlu from "@/views/Business/MyXianlu.vue";

import OrderHotel from "@/views/Business/OrderHotel.vue";
import OrderXianlu from "@/views/Business/OrderXianlu.vue";
export default {
  components: {
    SelfInfo,
    PushJd,
    PushHotel,
    PushXianlu,
    MyJd,
    MyHotel,
    MyXianlu,
    OrderXianlu,
    OrderHotel,
    PushGgao,
    MyGgao
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
       async logout() {
      this.$confirm("确认退出?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
         window.localStorage.removeItem("token");
              this.$message({
                type: "success",
                message: "退出成功!",
              });
              this.$router.push("/");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    handleSelect(key) {
      this.activeIndex = key;
      // console.log(this.activeIndex);
    },
  },
};
</script>
<style  scoped>
#contain {
  width: 1200px;
  margin: 0 auto;
}
.top {
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  padding: 20px;
}
.left1 {
  background-color: #545c64;
  height: 93vh;
}
</style>>
